<template>
  <div class="elt">
     <ul class="tab">
         <li :class="index==0?'active':''">全部{{num1}}</li>
         <li :class="index==1?'active':''">好评{{num2}}</li>
         <li :class="index==2?'active':''">中评{{num3}}</li>
         <li :class="index==3?'active':''">差评{{num4}}</li>
     </ul>
     <div v-for="item in pinglun" class="yonghu">
         <div class="top">
             <img :src=item.img alt="">
             <div class="name">
                 <p>{{item.name}}</p>
                 <p>配送 : {{item.ps}}    商品 : {{item.sp}}</p>
             </div>
             <span>{{item.time}}</span>
         </div>
         <div class="neirong">{{item.nr}}</div>
         <div v-if="item.sjhf" class="shangjia">
           <p>店家回复:</p>
           {{item.sjhf}}
           </div>
     </div>
  </div>
</template>
<style lang="scss" scoped>
.elt {
    .tab{
        margin: 5px;
        padding: 0;
        display: flex;
        li{
            padding: 5px;
            font-size: 14px;
            background-color: rgb(212, 212, 212);
            margin-right: 10px;
        }
        .active{
            background-color: rgb(255, 37, 37);
            color: white;
        }
    }
    .yonghu{
        margin-top: 10px;
        background-color: rgb(255, 255, 255);
        padding-bottom: 10px;
        padding: 10px;
        .top{
            display: flex;
            position: relative;
            img{
                width: 50px;
                height: 50px;
            }
            .name{
              margin-left: 10px;
                p{
                  font-weight: bold;
                  margin-top: 5px;
                    font-size: 18px;
                    padding: 0;
                    margin: 0;
                }
                p:nth-child(2){
                  font-weight: 400;
                  margin-top: 5px;
                  font-size: 13px;
                }
            }
            span{
                position: absolute;
                font-size: 12px;
                right: 10px;
                top: 10px;
            }
        }
    }
    .neirong{
      font-size: 15px;
      padding: 10px 0;
    }
    .shangjia{
      border-radius: 5px;
      font-size: 13px;
      padding: 8px;
      background-color: rgb(231, 231, 231);
      p{
        margin: 0;
        font-weight: bold;
        padding-bottom: 3px;
      }
    }
}
</style>
<script>
export default {
  name: "business",
  data() {
    return {
      id: 0,
      pinglun: [],
      num1:0,
      num2:0,
      num3:0,
      num4:0,
      index:0
    };
  },
  methods: {},
//   获取评论数据
  mounted() {
    this.id = this.$route.query.id;
    let _this = this;
    let pro = this.$http({
      method: "get",
      url: "/pinglun.json",
      data: {},
    });
    pro.then(function (res) {
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].id == _this.id) {
          _this.pinglun = res.data[i].pingjia;
          _this.num1=_this.pinglun.length
        }
      }
    });
  },
};
</script>